<template>
<div>
  <div>
    <el-card class="card-title">
      <div align="center">
        <span>历史订单</span>
      </div>
      <el-empty v-if="ordersState" :image-size="200"></el-empty>
      <div v-else :style="{'max-height': this.timeLineHeight + 'px' }"
           style="overflow-y:scroll;">
      <el-card class="card-order" :key="item.id" v-for="item in ordersForm">
        <span>订单编号：{{item.id}}</span>
        <el-button style="padding: 3px;z-index: 3;position: relative;top: 222px;left: 435px" disabled>
          <span style="font-size: 18px">{{item.orderState}}</span>
        </el-button>
        <span v-show="item.orderState!='已退款' && item.orderState!='已取消'" style="position: relative;left: 350px">状态：{{item.currentState}}</span>
        <div style="border: 1px solid #dcdfe6;margin: 10px 0px"></div>
        <el-row>
          <el-col :span="9">
            <div style="height: 200px">
              <img style="width: 100%;height: 100%" :src="serveUrl+item.url" alt="">
            </div>
          </el-col>
          <el-col :span="15">
            <el-descriptions style="margin: 5px" :column="1">
              <el-descriptions-item  label="酒店名称">{{item.hotelName}}</el-descriptions-item>
              <el-descriptions-item  label="地址">{{item.location}}</el-descriptions-item>
              <el-descriptions-item  label="房间类型">{{item.roomName}}</el-descriptions-item>
              <el-descriptions-item  label="预订数量">{{item.countOfBuyRooms}}</el-descriptions-item>
              <el-descriptions-item  label="入住时间">{{item.checkInTime}}</el-descriptions-item>
              <el-descriptions-item  label="离店时间">{{item.departureTime}}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <div style="border: 1px solid #dcdfe6;margin-bottom: 5px"></div>
        <span>下单时间：{{item.createTime}}</span>
        <span style="position: relative;left: 260px;bottom: 106px">
          总价：¥<span style="color: #FFA902FF;font-weight: bolder;font-size: 18px">{{item.orderPrice}}</span>
        </span>
        <span v-if="item.orderState=='待支付'">
          <el-button class="order-button-style" @click="openCancelConfirm(item.id)">取消订单</el-button>
          <el-button type="primary" class="order-button-style" @click="goToPay(item.id,item.orderPrice)">去支付</el-button>
        </span>
        <span v-if="item.orderState=='已支付'&& item.currentState!='已完成'">
          <el-button :disabled="item.currentState=='使用中'" type="primary" class="order-button-drawback" @click="openDrawbackConfirm(item.id)">退款</el-button>
        </span>
        <span v-if="item.orderState=='已支付' && item.currentState=='已完成'">
          <el-button type="primary" class="order-button-comment" @click="goTOComment(item.hotelId)">评价</el-button>
        </span>
      </el-card>
      </div>
    </el-card>
    <el-dialog top="200px" title="支付页面" width="400px" :visible.sync="payFormVisible">
      <span style="font-weight: bolder;font-size: 30px">总价：¥</span>
      <span style="color: #FFA902FF;font-weight: bolder;font-size: 30px">{{payOrderPrice}}</span>
      <div style="width: 360px">
        <img src="../../assets/imgs/2.png" width="100%"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="notToPay()">取消支付</el-button>
        <el-button type="warning" @click="isPay()">完成支付</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
      ordersForm:[],
      serveUrl:'http://localhost:9580',
      timeLineHeight: "",
      payOrderPrice:'',
      payOrderId:'',
      ordersState:true,
      payFormVisible:false
    }
  },
  methods:{
    goTOComment(hotelId){
      localStorage.setItem('hotelId',hotelId);
      this.$router.push('/page/book/BookHotel-HotelInfo');
    },
    openDrawbackConfirm(orderId){
      let message = '您确定要退款吗？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.drawback(orderId);
      }).catch(() => {
      });
    },
    drawback(orderId){
      let drawbackFunction='退款';
      let url='http://localhost:9580/orders/user/'+orderId+'/cancelOrderOrDrawback/'+drawbackFunction;
      console.log("url"+url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state==20000){
          this.$message({
            showClose: true,
            message: '退款成功！',
            type: 'success'
          });
          this.hadPayState=false;
          this.loadOrders();
        }else {
          this.$message({
            showClose: true,
            message: responseBody.message,
            type: 'error'
          });
        }
      })
    },
    goToPay(orderId,orderPrice){
      this.payFormVisible=true;
      this.payOrderId=orderId;
      this.payOrderPrice=orderPrice;
    },
    notToPay(){
      this.payFormVisible=false;
    },
    isPay(){
      let url = 'http://localhost:9580/orders/user/'+this.payOrderId+'/updateOrderStateByOrderId';
      console.log('url'+url);

      this.axios
          .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
          .get(url).then((response) =>{
        let responseBody=response.data;
        if (responseBody.state==20000){
          this.$message({
            showClose: true,
            message: '支付成功！',
            type: 'success'
          });
          this.payFormVisible=false;
          this.loadOrders();
        }else {
          this.$message({
            showClose: true,
            message: responseBody.message,
            type: 'error'
          });
        }
      })
    },
    openCancelConfirm(orderId){
      let message = '您确定要取消此订单吗？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelOrder(orderId);
      }).catch(() => {
      });
    },
    cancelOrder(orderId){
      let cancelOrderFunction='取消订单';
      let url='http://localhost:9580/orders/user/'+orderId+'/cancelOrderOrDrawback/'+cancelOrderFunction;
      console.log("url"+url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
            let responseBody = response.data;
            if (responseBody.state==20000){
              this.$message({
                showClose: true,
                message: '取消订单成功！',
                type: 'success'
              });
              this.loadOrders();
            }else {
              this.$message({
                showClose: true,
                message: responseBody.message,
                type: 'error'
              });
            }
      })
    },
    loadOrders(){
      let url='http://localhost:9580/orders/user/getOrdersList';
      console.log('url'+url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.ordersForm = responseBody.data;
        if (this.ordersForm.length==0){
          this.ordersState=true;
        }else {
          this.ordersState=false;
        }
        for (let order of this.ordersForm){
            order.createTime=order.createTime.replace(/[T]+/g,' ');
            order.checkInTime=order.checkInTime.replace(/[T]+/g,' ');
            order.departureTime=order.departureTime.replace(/[T]+/g,' ');
            if (order.orderState=="待支付"){
              this.notPayState=true;
            }else if (order.orderState=="已支付"){
              this.hadPayState=true;
            }else if (order.orderState=="已支付" && order.currentState=="已完成"){
              this.hadDoneState=true;
            }
        }
        console.log(this.ordersForm);
      });
    }
  },
  mounted() {
    this.loadOrders();
    this.timeLineHeight = document.documentElement.clientHeight - 210;
    window.onresize = () => {
      this.timeLineHeight = document.documentElement.clientHeight - 210;
    };
  }
}
</script>

<style scoped>
.card-order{
  padding: 0;
}
.card-title{
  width: 700px;
  height: 820px;
  margin: auto;
}
.order-button-style{
  height: 35px;
  text-align: center;
  padding: 0px;
  width: 80px;
  position: relative;
  left: 100px;
  top: 5px;
}
.order-button-drawback{
  height: 35px;
  text-align: center;
  padding: 0px;
  width: 80px;
  position: relative;
  left: 190px;
  top: 5px;
}
.order-button-comment{
  height: 35px;
  text-align: center;
  padding: 0px;
  width: 60px;
  position: relative;
  left: 210px;
  top: 5px;
}
</style>